<template>
	<div class="tag">
		<YRCardTitle title="标签"></YRCardTitle>
		<div class="content">
			<!-- <Tag color="primary" @click.native="allCheck">全选</Tag>
			<Tag color="primary" @click.native="reverseCheck">反选</Tag>
			<Tag checkable :checked="item.checked" :color="item.color" @on-change="changeCheck(item)"
			v-for="(item,index) in tagList" :key="index">{{item.name}}</Tag> -->
			<Tag  :checked="true" :color="item.color" @click.native="queryArticle(item)"
			v-for="(item,index) in tagList" :key="index">{{item.name}}</Tag>
		</div>
	</div>
</template>

<script>
import YRCardTitle from '@/components/common/YRCardTitle.vue';
import {mapMutations,mapState} from 'vuex';
export default {
  name: 'YRTag',
  components: {
    YRCardTitle
  },
  props: {
	title: String,
	list:{
		type: Array,
		default: () => []
	}
  },
	data:()=>{
		return{
			tagList:[],
		}  
	},
	computed:{
		...mapState({tagIdList:"tagIdList"}),   
	},
	methods:{
		...mapMutations(["setTagIdList"]),  
		getTagList(){
			this.$http.get("/api/tag/getTagList").then(res=>{
				this.tagList = res.map(e=>{
					e.checked = true;
					return e;
				});
				if(this.tagIdList.length>0){
					this.tagList.forEach(e=>{
						if(this.tagIdList.some(item=>item == e.id)){
							e.checked = true;
						}else{
							e.checked = false;
						}
					});
				}
			})
		},
		allCheck(){
			this.tagList.forEach(e=>e.checked=true);
			this.queryArticle();
		},
		reverseCheck(){
			this.tagList.forEach(e=>e.checked=!e.checked);
			this.queryArticle();
		},
		changeCheck(item){
			item.checked = !item.checked;
			this.queryArticle();
		},
		queryArticle(item){
			if(this.$router.history.current.path!='/article/articleList'){
				this.$router.push({path:'/article/articleList',query:{tagId:item.id}});
			}else{
				this.$router.push({path:'/article/articleList',query:{tagId:item.id}});
			}
			
		}
		
	},
	created() {
		this.getTagList();
	}
}
</script>

<style lang="stylus" scoped="scoped">
.tag
	border-radius: 10px
	overflow: auto
	box-shadow 0 0 0 2px rgba(0,0,0,.02), 0 4px 10px rgba(0,0,0,.06)
	.content
		padding 10px
		background #fff
		border-top 1px solid #eee
		opacity 0.6
		min-height 120px
		text-align center
		.ivu-tag
			cursor pointer
			opacity .9
</style>